import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';
import 'action.dart';
import 'state.dart';
import '../../../app_files.dart';

Widget buildView(
    OrderSignViewState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
    appBar: myAppBar(viewService.context, title: '电子签名', actions: [
      Container(
          width: 40,
          height: 80,
          margin: EdgeInsets.only(right: 20),
          child: GestureDetector(
            child: Align(
              child: Icon(Icons.refresh,color: Colors.white,),
            ),
            onTap: ()=> dispatch(OrderSignViewActionCreator.onClear()),
            behavior: HitTestBehavior.translucent,
          )
      ),
      GestureDetector(
        child: Container(
          width: 40,
          height: 80,
          margin: EdgeInsets.only(right: 20),
          child:Align(
            child:  Text(
              '保存',
              style: TextThemeConfig.Font16WithWhite,
            ),

          ),
        ),
        onTap: ()=> dispatch(OrderSignViewActionCreator.onSave()),
        behavior: HitTestBehavior.translucent,
      ),

    ]),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(left: 15, top: 15),
          child: Text(
            '请在下方空白处书写您的签字',
            style: TextThemeConfig.Font13WithColor66,
          ),
        ),
        Expanded(
          child: Container(
            margin: EdgeInsets.only(
                top: 15,
                bottom: 30,
                right: MediaQuery.of(viewService.context).padding.right + 15,
                left: 15),
            decoration: BoxDecoration(
              border: Border.all(color: ThemeConfig.lineColor),
            ),
            child: Signature(
              height: double.infinity,
              controller: state.controller,
              backgroundColor: Colors.white,
            ),
          ),
        ),
      ],
    ),
  );
}

class SignView extends StatefulWidget {
  @override
  _SignViewState createState() => _SignViewState();
}

class _SignViewState extends State<SignView> {
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 5,
    penColor: Colors.red,
    exportBackgroundColor: Colors.blue,
  );

  @override
  void initState() {
    super.initState();
    _controller.addListener(() => print("Value changed"));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          body: ListView(
            children: <Widget>[
              Container(
                height: 300,
                child: Center(
                  child: Text('Big container to test scrolling issues'),
                ),
              ),
              //SIGNATURE CANVAS
              Signature(
                controller: _controller,
                height: 300,
                backgroundColor: Colors.lightBlueAccent,
              ),
              //OK AND CLEAR BUTTONS
              Container(
                decoration: const BoxDecoration(color: Colors.black),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    //SHOW EXPORTED IMAGE IN NEW ROUTE
                    IconButton(
                      icon: const Icon(Icons.check),
                      color: Colors.blue,
                      onPressed: () async {
                        if (_controller.isNotEmpty) {
                          var data = await _controller.toPngBytes();
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (BuildContext context) {
                                return Scaffold(
                                  appBar: AppBar(),
                                  body: Center(
                                      child: Container(
                                          color: Colors.grey[300],
                                          child: Image.memory(data))),
                                );
                              },
                            ),
                          );
                        }
                      },
                    ),
                    //CLEAR CANVAS
                    IconButton(
                      icon: const Icon(Icons.clear),
                      color: Colors.blue,
                      onPressed: () {
                        setState(() => _controller.clear());
                      },
                    ),
                  ],
                ),
              ),
              Container(
                height: 300,
                child: Center(
                  child: Text('Big container to test scrolling issues'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
